<template>
  <el-dialog v-model="visible" center align-center width="580">
    <template #title>
      <custom-title title="上传凭证" />
    </template>
    <el-form :model="form" ref="formRef">
      <el-form-item>
        <div>
          <el-upload class="avatar-uploader" multiple :show-file-list="false" :http-request="customRequest">
            <div class="list">
              <div class="code" v-for="(item, index) in form" :key="item" @click.stop>
                <el-image
                  class="code"
                  :src="item.fileUrl"
                  :preview-src-list="form.map(v => v.fileUrl)"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :initial-index="index"
                  fit="cover"
                  hide-on-click-modal
                />
                <div class="del">
                  <el-icon @click="viewImg(item)">
                    <ZoomIn />
                  </el-icon>
                  <el-icon @click.stop="delImg(item)">
                    <DeleteFilled />
                  </el-icon>
                </div>
              </div>
              <el-icon class="upload" v-if="form.length < 6">
                <Plus />
                <span>点击上传</span>
              </el-icon>
            </div>
          </el-upload>
          <el-dialog v-model="dialogVisible" class="view-img-dialog" :show-close="false" center align-center>
            <img class="view-img" :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          <div class="tip">注：支持{{ fileType }}格式，单张大小不超过{{ maxSize }}MB，只支持{{ maxCount }}张</div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="editImgComfirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from "vue";
import uploadFile from "@/utils/uploadFile";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  imgs: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(["update:show", "update:imgs", "confirm"]);
const viewImg = img => {
  dialogImageUrl.value = img.fileUrl;
  dialogVisible.value = true;
};
const visible = computed({
  set: val => {
    emit("update:show", val);
  },
  get: () => {
    return props.show;
  }
});
const formRef = ref(null);
const delImg = img => {
  form.value = form.value.filter(item => item.fileId != img.fileId);
  if (form.value.length < 6) isImgMax.value = false;
};
const form = computed({
  get: () => {
    return props.imgs;
  },
  set: val => {
    emit("update:imgs", val);
  }
});
const isImgMax = ref(false);
/**
 * 自定义上传
 */
const maxSize = ref(20);
const maxCount = ref(6);
const fileType = ref("JPG/JPEG/PNG");
const customRequest = async options => {
  console.log(111);
  const type = ["image/jpg", "image/jpeg", "image/png"];
  const { file } = options;
  if (!type.includes(file.type)) {
    ElMessage.error("图片格式错误");
    return false;
  } else if (file.size / 1024 / 1024 > maxSize.value) {
    ElMessage.error(`图片大小不能超过${maxSize.value}MB!`);
    return false;
  }
  const fileInfo = await uploadFile(options);
  if (form.value.length < maxCount.value) {
    form.value.push({ fileUrl: fileInfo.url, fileName: fileInfo.name, fileId: fileInfo.uid });
  } else {
    if (!isImgMax.value) ElMessage.error(`最多上传${maxCount.value}张图片`);
    isImgMax.value = true;
  }
};
const editImgComfirm = () => {
  if (form.value.length > 0) {
    emit("comfirm", form.value);
  } else {
    ElMessage.error("请上传图片");
  }
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  .list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .upload {
    width: 80px;
    height: 80px;
    background: #f2f3f5;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    align-self: center;
    color: #c9cdd4;

    span {
      font-style: normal;
    }
  }

  .el-icon svg {
    font-size: 24px;
  }

  .code {
    width: 80px;
    height: 80px;
    background: #f2f3f5;
    position: relative;

    &:hover {
      .del {
        display: flex;
        gap: 10px;
      }
    }

    .del {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.2);
      display: none;
      color: #f2f3f5;
      font-size: 20px;
    }
  }
}

.view-img {
  width: 100%;
  height: 100%;
}
</style>
